<template>
    <div class="scheme">
        <header>
            <hoomnavbar :active-index="1"/>
        </header>
        <main>
            <article class="super-shop">
                <div class="supershop-pic-wrap">
                    <img class="digital animater-el" data-animater="animate__fadeInDown" src="../assets/imgs/scheme/superstore.png" alt="">
                    <img class="yunhao animater-el" data-animater="animate__fadeInDown" src="../assets/imgs/scheme/yunhao.png" alt="">
                </div>
                <div class="super-shop-container">
                    <div class="shop-container-left">
                        <div class="shop-container-top animater-el" data-animater="animate__fadeInDown">
                            <h2 class="animater-el" data-animater="animate__fadeInDown">数字化超级门店</h2>
                            <b>获客超轻松，流量自循环</b>
                        </div>
                        <div class="shop-container-bottom">
                            <h2 class="animater-el" data-animater="animate__fadeInDown">数字化超级门店聚合解决方案</h2>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                5G时代信息来源碎片化愈加严重，传统获客方式成本高、效果差；
                                不懂运营、不会营销、客户越来越挑剔，令实体生意更难做！
                                云浩科技现推出“超级门店解决方案”业务，是一项汇集了数据中心、人像采集、CRM系统为一体的聚合型解决方案，
                                帮助实体商户轻松多维获客，实现流量自循环。
                            </p>
                        </div>
                    </div>
                    <div class="shop-container-right">
                        <img  class="animater-el" data-animater="animate__rotateInDownRight" src="../assets/imgs/scheme/scheme_pic_1.png" alt="">
                    </div>
                </div>
            </article>
            <article class="crm-function">
                <ul>
                    <li class="function-item" data-animater="animate__bounceInLeft">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_1.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>多维获客</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    告别传统单一获客渠道，通过数据采集器可以轻松捕获热门商圈/门店周边的多维度公共信息，得到的线下数据更加全面、真实、准确，而且客户转化率更高
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/conversion rate.png" alt="">
                            </div>
                        </div>
                        <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/huoke.png" alt="">
                        </div>
                    </li>
                    <li class="function-item" data-animater="animate__bounceInRight">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_2.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>实时监测</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    通过大视实时监测门店客流情况，客户的性别、年龄、消费水平、常用APP等清晰可见；微信小程序可以随时随地查看画像报告，新老客户比例、停留时间等完美呈现，真正用数据管理门店
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/detection.png" alt="">
                            </div>
                        </div>
                       <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/jiance.png" alt="">
                        </div>
                    </li>
                     <li class="function-item" data-animater="animate__bounceInLeft">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_3.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>快速锁定</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    利用强大的LRA算法，从已采集到的数据库中快速锁定线下目标客户群体；通过互联网行为分析，从庞大的线上大数据库筛选出更多有类似需求的线上目标客户群体
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/positioning.png" alt="">
                            </div>
                        </div>
                       <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/suoding.png" alt="">
                        </div>
                    </li>
                    <li class="function-item" data-animater="animate__bounceInRight">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_4.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>定向投放</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    与国内众多主流媒体APP达成合作，将广告定向投放至目标客户人群，实现跨媒体投放、多渠道曝光，广告展现形式很丰富，客户接受度更高
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/directional.png" alt="">
                            </div>
                        </div>
                       <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/toufang.png" alt="">
                        </div>
                    </li>
                    <li class="function-item" data-animater="animate__bounceInLeft">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_5.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>用户画像</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    每个进店消费的客户都会建立相应的会员档案，通过自定义标签化设置，将门店会员进行精细化管理，使门店客户画像更精准，充分掌握用户真实需求
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/portrait.png" alt="">
                            </div>
                        </div>
                       <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/huaxiang.png" alt="">
                        </div>
                    </li>
                     <li class="function-item" data-animater="animate__bounceInRight">
                        <div class="function-info-wrap">
                            <div class="function-item-top">
                                <div class="function-top-left">
                                    <img class="number-pic" src="../assets/imgs/scheme/pic_6.png" alt="">
                                </div>
                                <div class="function-top-right">
                                    <h2>精准营销</h2>
                                </div>
                            </div>
                            <div class="function-item-bottom">
                                <p>
                                    通过AI人脸识别技术，在顾客进店的瞬间，其以往在该品牌门店的消费情况将立即被推送至对应员工的移动设备上，员工可从中提取有效信息，进行1对1个性化服务/营销，门店会员转化留存率得到大幅提升
                                </p>
                                <img class="function-buttom-img" src="../assets/imgs/scheme/marketing.png" alt="">
                            </div>
                        </div>
                       <div class="img-wrap">
                            <img class="function-buttom-img2" src="../assets/imgs/scheme/yinxiao.png" alt="">
                        </div>
                    </li>
                    
                </ul>
            </article>
        </main>
        <footer>
            <hoomfooter/>
        </footer>
    </div>
</template>
<script>
import Observer from '../utils/observer.js'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'
export default {
    components:{
        hoomnavbar,
        hoomfooter
    },
    data(){
        return{
            observer:'',
        }
    },
    created(){
        console.log('组件w')
        
    },
    mounted(){
        const els = document.querySelectorAll('.function-item')
        const els2 = document.querySelectorAll('.animater-el')
        const allel = [...els,...els2];
        this.observer = Observer({
                els:allel,
                threshold:0.2
            },(el)=>{
                const classStr = el.dataset.animater.split(',');
                el.style.visibility = 'visible';
                el.classList.add(classStr[0])
            })
    },
    beforeDestroy(){
        this.observer && window.removeEventListener('scroll',this.observer)
    },
}
</script>
<style lang="less" scoped>
@import '../assets/css/variable.less';
.scheme{
    main{
        // height: 6273 * @crem;
        background: #5DA6D9 url('../assets/imgs/scheme/scheme_bg.jpg') no-repeat;
        background-size: cover;
        
    }
    .super-shop{
        // padding-left: 150 * @crem;
        padding-top: 5.6rem;
         width: 1780 * @crem;
        margin: 0 auto;
        .supershop-pic-wrap{
            height: 269 * @crem;
            width: 1683 * @crem;
            position: relative;
            .digital{
                width: 857 * @crem;
                height: 223 * @crem;
                position: absolute;
                left: 0;
                top: 0;
            }
            .yunhao{
                width: 787 * @crem;
                height: 134 * @crem;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        .super-shop-container{
            display: flex;
            height: 1063 * @crem;
            position: relative;
            .shop-container-left{
                height: 100%;
                width: 900 * @crem;
                display: flex;
                flex-flow: column;
                justify-content: space-between;
            }
            .shop-container-right{
                flex: auto;
                position: relative;
            }
            .shop-container-right img{
                position: absolute;
                top: 100 * @crem;
                // right: 48 * @crem;
                // right: 20 * @crem;
                right: 0;
                // height: 1017 * @crem;
                width: 1015 * @crem;
                height: 1015 * @crem;
            }
            .shop-container-top{
                color: #fff;
                height: 390 * @crem;
                background: url('../assets/imgs/scheme/shape_17.png') left bottom no-repeat;
                background-size: 668 * @crem 100 * @crem;
                text-align: left;
                h2{
                    font-size: 120 * @crem;
                    font-weight: bold;
                }
                b{
                    font-size: 77 * @crem;
                    margin-top: 40 * @crem;
                }
            }
            .shop-container-bottom{

                h2{
                    width: 630 * @crem;
                    height: 47 * @crem;
                    background: linear-gradient(94deg, #EDAEE6 0%, #52A0D6 100%);
                    font-size: 45 * @crem;
                    font-weight: bold;
                    letter-spacing: 1px;
                    line-height: 25 * @crem;
                    text-shadow: -5 * @crem 7 * @crem 13 * @crem rgba(62, 136, 189, 0.38);
                    color: #fff;
                }
                p{
                    text-align: left;
                    width: 739 * @crem;
                    padding:10 * @crem 0;
                    text-indent:    2em;
                    margin-top: 22 * @crem;
                    font-size: 22 * @crem;
                    color: #fff;
                    line-height: 37 * @crem;
                    text-shadow: -5 * @crem 7 * @crem 13 * @crem rgba(87, 117, 171, 0.38);
                    letter-spacing: 2px;
                }
            }
        }
    }
    .crm-function{
        // padding: 0 150 * @crem;
        width: 1700 * @crem;
        margin: 0 auto;
        // padding: 0 110 * @crem;
        // background: url('../assets/imgs/scheme/function_bg.png') top 500 * @crem left 46% no-repeat;
        // background-size: 584 * @crem 3659 * @crem;
        margin-top: 200 * @crem;
        padding-bottom: 170 * @crem;
        padding-top: 60 * @crem;
        // overflow: hidden;
        .function-item{
            height: 595 * @crem;
            margin-top: 190 * @crem;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            .img-wrap{
                flex: auto;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    position: absolute;
                    right: 0;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    // width: 100%;
                    // height: 100%;
                }
            }
            .function-info-wrap{
                box-shadow: 0px 3 * @crem 27 * @crem 0px rgba(22, 87, 133, 0.08);
                width: 820 * @crem;
                height: 100%;
                // border: 1 * @crem solid pink;
                position: relative;
                .function-item-top{
                    height: 50%;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: flex-end;
                    box-sizing: border-box;
                    padding-bottom: 25 * @crem;
                    .function-top-left{
                        margin-right: 5 * @crem;
                        // font-size: 250 * @crem;
                        // color: #fff;
                        position: relative;
                        width: 25%;
                        // text-shadow: -5 * @crem 7 * @crem 13 * @crem rgba(87, 117, 171, 0.38);
                        .number-pic{
                            position: absolute;
                            bottom: -18 * @crem;
                            right: 50%;
                            transform: translate(50%);
                        }
                    }
                    .function-top-left::before{
                        content: '';
                        display: block;
                        position: absolute;
                        width: 87 * @crem;
                        height: 87 * @crem;
                        border-radius: 50%;
                        background-color: #FFC6F9;
                        right: 0;
                        bottom: 0;
                        // z-index: -1;
                    }
                    .function-top-right{
                        width: 75%;
                        height: 145 * @crem;
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-end;
                        background: url('../assets/imgs/scheme/shape_18.png') left top no-repeat;
                        background-size: 100% auto;
                        color: #fff;
                        font-size: 60 * @crem;
                        font-weight: 500;
                        text-shadow: -5 * @crem 7 * @crem 13 * @crem rgba(87, 117, 171, 0.38);
                        // line-height: 47 * @crem;
                        letter-spacing: 2 * @crem;
                        box-sizing: border-box;
                    }
                }
                .function-item-bottom{
                    box-sizing: border-box;
                    padding-top: 25 * @crem;
                    height: 50%;
                    position: relative;
                    p{
                        width: 682 * @crem;
                        margin: 0 auto;
                        padding: 0 20 * @crem;
                        text-shadow: -5 * @crem 7 * @crem 13 * @crem rgba(87, 117, 171, 0.38);
                        line-height: 37 * @crem;
                        font-size: 22 * @crem;
                        color: #fff;
                        text-align: left;
                        text-indent: 2em;
                    }
                    img{
                        // position: absolute;
                        // bottom: 0;
                        // left: 50%;
                        // transform: translate(-50%);
                        // margin: auto;
                        // width: 700 * @crem;
                        // height: 95 * @crem;
                    }
                }
            }
        }
        .function-item:nth-child(2n-1){
            .function-info-wrap{
                border-radius: 0px 200 * @crem 0px 0px;
            }
            .function-top-left{
                margin-right: 5 * @crem;
            }
            .function-top-right{
                padding-left: 20 * @crem;
            }
            .function-item-top{
                padding-right: 55 * @crem;
            }

        }
        .function-item:nth-child(2n){
            flex-flow: row-reverse nowrap;
            
            .function-info-wrap{
                border-radius: 200 * @crem 0px 0px 0px;
            }
             .function-item-top{
                 flex-flow: row-reverse nowrap;
                 padding-left: 55 * @crem;
                 .function-top-left{
                    margin-left: 5 * @crem;
                }
                .function-top-left::before{
                        content: '';
                        display: block;
                        position: absolute;
                        width: 87 * @crem;
                        height: 87 * @crem;
                        border-radius: 50%;
                        background-color: #FFC6F9;
                        left: 0;
                        bottom: 0;
                        // z-index: -1;
                    }
             }
              .function-top-right{
                flex-flow: row-reverse nowrap;
                padding-right: 20 * @crem;
              }
        }
        .function-item:first-child{
            margin-top: 0;
            .function-info-wrap{
                background: linear-gradient(-54deg,  rgba(29, 159, 235, 0.83),rgba(255, 188, 249, 0.83));
            }
            .function-buttom-img2{
                width: 800 * @crem;
                height: 800 * @crem;
            }
            .number-pic{
                width: 103 * @crem;
                height: 196 * @crem;
            }
                .function-buttom-img{
                    position: absolute;   
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 740 * @crem;
                }
        }
        .function-item:nth-child(2){
            .function-info-wrap{
                background: linear-gradient(-54deg,  rgba(29, 159, 235, 0.83),rgba(188, 227, 255, 0.83));
                // left: -80 * @crem;
                // top: -30 * @crem;
            }
             .function-buttom-img2{
                width: 650 * @crem;
                // height: 541 * @crem;
                position: relative;
                left: -30 * @crem;
            }
            .number-pic{
                width: 146 * @crem;
                height: 200 * @crem;
            }
            .function-buttom-img{
                position: absolute;   
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 715 * @crem;
            }
        }
        .function-item:nth-child(3){
            .function-info-wrap{
                background: linear-gradient(-54deg, rgba(29, 159, 235, 0.83),rgba(190, 188, 255, 0.83) );
            }
             .function-buttom-img2{
                width: 748 * @crem;
                height: 453 * @crem;
            }
            .number-pic{
                width: 143 * @crem;
                height: 202 * @crem;
            }
            .function-buttom-img{
                position: absolute;   
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 733 * @crem;
            }
            
        }
        .function-item:nth-child(4){
            .function-info-wrap{
                background: linear-gradient(-54deg,  rgba(29, 159, 235, 0.83),rgba(180, 244, 212, 0.83));
            }
             .function-buttom-img2{
                width: 750 * @crem;
                // height: 664 * @crem;
                // position: relative;
                // top: 5px;
                position: relative;
                top: -30 * @crem;
            }
            .number-pic{
                width: 154 * @crem;
                height: 196 * @crem;
            }
            .function-buttom-img{
                position: absolute;   
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 740 * @crem;
            }
        }
        .function-item:nth-child(5){
            .function-info-wrap{
                background: linear-gradient(-54deg,  rgba(29, 159, 235, 0.83),rgba(254, 240, 161, 0.83));
            }
             .function-buttom-img2{
                width: 786 * @crem;
                // height: 696 * @crem;
            }
            .number-pic{
                width: 143 * @crem;
                height: 198 * @crem;
            }
            .function-buttom-img{
                position: absolute;   
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 635 * @crem;
            }
        }
        .function-item:last-child{
            .function-info-wrap{
                background: linear-gradient(-54deg,  rgba(38, 196, 236, 0.83),rgba(255, 190, 216, 0.83));
                // top: -30 * @crem;
                // left: 20 * @crem;
            }
             .function-buttom-img2{
                width: 800 * @crem;
                // height: 398 * @crem;
            }
            .number-pic{
                width: 148 * @crem;
                height: 202 * @crem;
            }
            .function-buttom-img{
                position: absolute;   
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 700 * @crem;
            }
        }
    }
}    
</style>